<template>
  <el-drawer :visible.sync="showDrawer" direction="rtl" size="60%" :modal-append-to-body = "false" :with-header="false" >
    <div class="title">
      <span @click="showDrawer = false">く {{rowData.name}}</span>
    </div>

    <div class="body-box">
      <div class="cabinet">
        <cabinet-box :cabinet="cabinet" cell-width="8vw" cell-height="5.6vw" @onload = "onload"/>
      </div>
    </div>

  </el-drawer>
</template>

<script>

import {sidedDetail} from "@/api/prison/cabinetcell";
import UserTable from "./components/user-table";
import CabinetBox from "../cabinet-box";

export default {
  name: "drawer-detail",
  components: {CabinetBox, UserTable},
  data() {
    return {
      showDrawer: false,
      rowData:{
        rowNum: 0,
        cellNum: 0,
      },
      cabinet:{},
    };
  },

  methods: {
    open(row){
      this.rowData = row;
      this.showDrawer = true;
      this.loadCabinet(row.id)
    },

    onload(){
      this.loadCabinet(this.rowData.id)
    },

    loadCabinet(cabinetId){
      sidedDetail(cabinetId).then(res=>{
        this.cabinet = res.data.data
      })
    },


  }

}
</script>

<style scoped lang="scss">

.title{
  padding: 10px;
  background-color: #8CAAE0;
  position: fixed;
  top: 0;
  width: 100%;
  cursor: pointer;
}

.body-box{
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top: 30px;
  .cabinet{
    max-width: 100%;
    overflow: scroll;
    white-space: nowrap;
  }

}






</style>
